import factory from '../../assets/factory.svg';

const Flow = G6Editor.Flow;

Flow.registerNode('factory-card', {
  setState: function setState(name, value, item) {
    console.log('name, value, item', name, value, item)
  },
  draw(item) {
    console.log('aaaaaaaaaaaaaaaaaaa', item);
    
    const group = item.getGraphicGroup();
    console.log('group-->', item)
    const model = item.getModel();
    const width = 100;
    const height = 100;
    const x = -width / 2;
    const y = -height / 2;
    const keyShape = group.addShape('image', {
      attrs: {
        x,
        y,
        width,
        height,
        img: factory
      }
    })
    group.addShape('rect', {
      attrs: {
        x,
        y,
        width,
        height,
        radius: 4,
        lineWidth: 2,
        stroke: '#666'
      }
    });
    group.addShape('text', {
      attrs: {
        text: model.label,
        x: 0,
        y: y + 120,
        textAlign: 'center',
        textBaseline: 'top',
        fill: model.color ? model.color : 'rgba(0,0,0,0.65)'
      }
    });
    // 动画部分
    var r = 20;
    var back1 = group.addShape('rect', {
      zIndex: -3,
      attrs: {
        x,
        y,
        width,
        height,
        // fill: '#000',
        stroke: '#666',
        opacity: 0.6
      }
    });
    var back2 = group.addShape('rect', {
      zIndex: -2,
      attrs: {
        x,
        y,
        width,
        height,
        // fill: '#000',
        stroke: '#666',
         // 为了显示清晰，随意设置了颜色
        opacity: 0.6
      }
    });

    var back3 = group.addShape('rect', {
      zIndex: -1,
      attrs: {
        x,
        y,
        width,
        height,
        // fill: '#000',
        stroke: '#666',
        opacity: 0.6
      }
    });
    group.sort(); // 排序，根据zIndex 排序
    back1.animate({ // 逐渐放大，并消失
      x: x - 10,
      y: y - 10,
      width: width + 20,
      height: height + 20,
      opacity: 0.1,
      repeat: true // 循环
    }, 3000, 'easeCubic', null, 0); // 无延迟

    back2.animate({ // 逐渐放大，并消失
      x: x - 10,
      y: y - 10,
      width: width + 20,
      height: height + 20,
      opacity: 0.1,
      repeat: true // 循环
    }, 3000, 'easeCubic', null, 1000); // 1 秒延迟

    back3.animate({ // 逐渐放大，并消失
      x: x - 10,
      y: y - 10,
      width: width + 20,
      height: height + 20,
      opacity: 0.1,
      repeat: true // 循环
    }, 3000, 'easeCubic', null, 2000); // 2 秒延迟
    
    return keyShape;
  },
  // afterDraw: function afterDraw(cfg, group) {
  //   console.log('cfg, group', cfg.size, group);
    
  //   var r = cfg.size / 2;
  //   var back1 = group.addShape('circle', {
  //     zIndex: -3,
  //     attrs: {
  //       x: 0,
  //       y: 0,
  //       r: r,
  //       fill: cfg.color,
  //       opacity: 0.6
  //     }
  //   });
  //   var back2 = group.addShape('circle', {
  //     zIndex: -2,
  //     attrs: {
  //       x: 0,
  //       y: 0,
  //       r: r,
  //       fill: cfg.color, // 为了显示清晰，随意设置了颜色
  //       opacity: 0.6
  //     }
  //   });

  //   var back3 = group.addShape('circle', {
  //     zIndex: -1,
  //     attrs: {
  //       x: 0,
  //       y: 0,
  //       r: r,
  //       fill: cfg.color,
  //       opacity: 0.6
  //     }
  //   });
  //   group.sort(); // 排序，根据zIndex 排序
  //   back1.animate({ // 逐渐放大，并消失
  //     r: r + 10,
  //     opacity: 0.1,
  //     repeat: true // 循环
  //   }, 3000, 'easeCubic', null, 0); // 无延迟

  //   back2.animate({ // 逐渐放大，并消失
  //     r: r + 10,
  //     opacity: 0.1,
  //     repeat: true // 循环
  //   }, 3000, 'easeCubic', null, 1000); // 1 秒延迟

  //   back3.animate({ // 逐渐放大，并消失
  //     r: r + 10,
  //     opacity: 0.1,
  //     repeat: true // 循环
  //   }, 3000, 'easeCubic', null, 2000); // 2 秒延迟
  // },
  // 设置锚点
  // anchor: (a,b,c,d) => {
  //   console.log('a,b,c,d', a,b,c,d);
  // }
  anchor: [[0,0],[.5,0],[1, 0],[1,.5],[.5,1],[0, 1],[0,.5],[1,1]]
  // anchor: [
  //   [0, 0],
  //   [0.5, 0],
  //   [1, 0],
  //   [0, 0.5], // 上面边的中点
  //   [1, 0.5],
  //   [0, 1],
  //   [0.5, 1], // 下边边的中点
  //   [1, 1]
  // ]
});

// 注册模型卡片基类
Flow.registerNode('model-card', {
  draw(item) {
    const group = item.getGraphicGroup();
    const model = item.getModel();
    const width = 184;
    const height = 40;
    const x = -width / 2;
    const y = -height / 2;
    const borderRadius = 4;
    const keyShape = group.addShape('rect', {
      attrs: {
        x,
        y,
        width,
        height,
        radius: borderRadius,
        fill: 'white',
        stroke: '#CED4D9'
      }
    });
    // 左侧色条
    group.addShape('path', {
      attrs: {
        path: [
          ['M', x, y + borderRadius],
          ['L', x, y + height - borderRadius],
          ['A', borderRadius, borderRadius, 0, 0, 0, x + borderRadius, y + height],
          ['L', x + borderRadius, y],
          ['A', borderRadius, borderRadius, 0, 0, 0, x, y + borderRadius]
        ],
        fill: this.color_type
      }
    });
    // 类型 logo
    group.addShape('image', {
      attrs: {
        img: this.type_icon_url,
        x: x + 16,
        y: y + 12,
        width: 20,
        height: 16
      }
    });
    // group.addShape('line', {
    //   attrs: {
    //     fill: this.color_type
    //   }
    // });
    // 名称文本
    const label = model.label ? model.label : this.label;
    group.addShape('text', {
      attrs: {
        text: label,
        x: x + 52,
        y: y + 13,
        textAlign: 'start',
        textBaseline: 'top',
        fill: 'rgba(0,0,0,0.65)'
      }
    });
    // 状态 logo
    group.addShape('image', {
      attrs: {
        img: this.state_icon_url,
        x: x + 158,
        y: y + 12,
        width: 16,
        height: 16
      }
    });
    return keyShape;
  },
  // 设置锚点
  anchor: [
    [0.5, 0], // 上面边的中点
    [0.5, 1] // 下边边的中点
  ]
});

// k 均值聚类
Flow.registerNode('k-means', {
  label: 'k 均值聚类',
  color_type: '#1890FF',
  type_icon_url: 'https://gw.alipayobjects.com/zos/rmsportal/czNEJAmyDpclFaSucYWB.svg',
  state_icon_url: 'https://gw.alipayobjects.com/zos/rmsportal/MXXetJAxlqrbisIuZxDO.svg',
  // 设置锚点
  anchor: [
    [0.5, 0, {
      type: 'input'
    }], // 上面边的中点
    [0.5, 1, {
      type: 'output'
    }] // 下边边的中点
  ]
}, 'model-card');

// 随机森林
Flow.registerNode('random-forest', {
  label: '随机森林',
  color_type: '#9254DE',
  type_icon_url: 'https://gw.alipayobjects.com/zos/rmsportal/czNEJAmyDpclFaSucYWB.svg',
  state_icon_url: 'https://gw.alipayobjects.com/zos/rmsportal/MXXetJAxlqrbisIuZxDO.svg',
  // 设置锚点
  anchor: [
    [0.5, 0, {
      type: 'input'
    }],
    [0.5, 1, {
      type: 'output'
    }]
  ]
}, 'model-card');

// PS-SMART 分类
Flow.registerNode('PS-SMART', {
  label: 'PS-SMART 分类',
  color_type: '#1890FF',
  type_icon_url: 'https://gw.alipayobjects.com/zos/rmsportal/czNEJAmyDpclFaSucYWB.svg',
  state_icon_url: 'https://gw.alipayobjects.com/zos/rmsportal/MXXetJAxlqrbisIuZxDO.svg',
  // 设置锚点
  anchor: [
    [0.5, 0, {
      type: 'input'
    }],
    [0.33, 1, {
      type: 'output'
    }],
    [0.66, 1, {
      type: 'output'
    }]
  ]
}, 'model-card');

// 朴素贝叶斯
Flow.registerNode('Bayes', {
  label: '朴素贝叶斯',
  color_type: '#9254DE',
  type_icon_url: 'https://gw.alipayobjects.com/zos/rmsportal/czNEJAmyDpclFaSucYWB.svg',
  state_icon_url: 'https://gw.alipayobjects.com/zos/rmsportal/uZVdwjJGqDooqKLKtvGA.svg',
  // 设置锚点
  anchor: [
    [0.5, 0, {
      type: 'input'
    }],
    [0.5, 1, {
      type: 'output'
    }]
  ]
}, 'model-card');

// 读数据表
Flow.registerNode('read-data-base', {
  label: '读数据表',
  color_type: '#FAAD14',
  type_icon_url: 'https://gw.alipayobjects.com/zos/rmsportal/czNEJAmyDpclFaSucYWB.svg',
  state_icon_url: 'https://gw.alipayobjects.com/zos/rmsportal/MXXetJAxlqrbisIuZxDO.svg',
  // 设置锚点
  anchor: [
    [0.5, 1, {
      type: 'output'
    }]
  ]
}, 'model-card');

// const MIN_ARROW_SIZE = 3;
Flow.registerEdge('line', {
  draw(item) {
    const group = item.getGraphicGroup();
    const path = this.getPath(item);

    // const width = 20;

    let aaa = group.addShape('path', {
      attrs: {
        path,
        stroke: 'black',
        // lineWidth: width,
        endArrow: true,
        lineDash: [10, 10]
      }
    });
    return aaa;
  },
  getPath(item) {
    const points = item.getPoints();
    return G6Editor.Util.pointsToPolygon(points);
  },
  afterDraw: function afterDraw(item) {
    var keyShape = item.getKeyShape();
    keyShape.attr('lineDashOffset', 0);
    keyShape.animate({
      lineDashOffset: -20,
      repeat: true
    }, 500);
  }
});
